<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.stacks {
				display: flex;
				flex-direction: row;
				height: 100vh;
				list-style: none;
			}
			.stacks:hover li {
				transform: translateY(-100vh);
			}
			li {
				overflow: hidden;
				position: relative;
				background-color: #ccc;
				flex: 1;
				/* margin-right: 1px; */
				transition: 1s ease-in-out;
			}
			li::after {
				position: absolute;
				top: 0;
				left: 0;
				content: "";
				display: block;
				width: 100vw;
				height: 100vh;
				background-image: url(https://images.unsplash.com/photo-1536700503339-1e4b06520771?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80);
				background-size: cover;
			}
			li:nth-child(2) {
				transition-delay: 0.06s;
			}
			li:nth-child(3) {
				transition-delay: 0.12s;
			}
			li:nth-child(4) {
				transition-delay: 0.18s;
			}
			li:nth-child(5) {
				transition-delay: 0.24s;
			}
			li:nth-child(6) {
				transition-delay: 0.3s;
			}
			li:nth-child(7) {
				transition-delay: 0.36s;
			}
			li:nth-child(8) {
				transition-delay: 0.42s;
			}
			li:nth-child(9) {
				transition-delay: 0.48s;
			}
			li:nth-child(10) {
				transition-delay: 0.54s;
			}
			li:nth-child(2)::after {
				left: -10vw;
			}
			li:nth-child(3)::after {
				left: -20vw;
			}
			li:nth-child(4)::after {
				left: -30vw;
			}
			li:nth-child(5)::after {
				left: -40vw;
			}
			li:nth-child(6)::after {
				left: -50vw;
			}
			li:nth-child(7)::after {
				left: -60vw;
			}
			li:nth-child(8)::after {
				left: -70vw;
			}
			li:nth-child(9)::after {
				left: -80vw;
			}
			li:nth-child(10)::after {
				left: -90vw;
			}
		</style>
	</head>
	<body>
		<ul class="stacks">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>
</html>
